<template>
  <view class="my">
    <u-avatar :src="user.avatar ? user.avatar:'@/static/images/profile/avator.png'" size="80"></u-avatar>
    <view class="info">
      <view class="name">
        {{user.nickname}}
      </view>
      <view class="phone">
        关联电话：{{user.phone}}
      </view>
    </view>
  </view>
</template>

<script>
	import {mapState} from 'vuex'
  export default {
    data() {
      return {

      };
    },
		computed: {
			...mapState({
				user: state => state.user.user
			}),
		},
		created() {
			console.log(this.$store.state.user.user);
		}
  }
</script>

<style lang="scss" scoped>
  .my {
    // #ifdef H5
    height: 18vh;
    //  #endif
    // #ifdef MP-WEIXIN || APP-PLUS
    height: 23vh;
    // #endif
    padding: 0 40upx;
    display: flex;
    align-items: center;

    .info {
      flex: 1;
      padding: 0 20upx;

      .name {
        height: 60upx;
        font-size: 36upx;
        letter-spacing: 0.09px;
        font-weight: 700;
        color: #fff;
      }
      .phone{
        font-size: 24upx;
        color: #ffffff;
        letter-spacing: 0.06px;
      }
    }
  }
</style>
